<template>
  <div>--------------</div>
  <div>{{info.age}}</div>
  <el-button type="primary" @click="info.age++">增加</el-button>
  <el-button type="primary" @click="change">改变</el-button>
</template>

<script>
import { computed, reactive,toRefs,} from 'vue'
export default {
  name: '',
  components: {
  },
  props:{
    testValue:{
      type:Object,
      default: () => {
        return {}
      }
    }
  },
  emits:['update:testValue'],
  setup(props,{emit}) {
    const state = reactive({
      
    })

    const info = computed({
      get(){
        return props.testValue
      },
      set(val){
        console.log('value',val);
        emit('update:testValue',val)
      }
    })

    const change = () => {
      info.value = {
        name:'zhao',
        age:24
      }
    } 

    return {
    ...toRefs(state),
    info,
    change
    }

  }
};
</script>
<style lang='scss' scoped>
</style>